<template>
  <div class="app-container111">
    <div class="header-wrapper">
      <el-page-header content="返回订单列表" @back="goBack" />
      <div v-if="form.id" class="header-btns">
        <el-button type="primary" size="small" @click="showOrderXmlDrawer = true">订单报文</el-button>
        <el-button type="primary" size="small" @click="showManifestXmlDrawer = true">清单报文</el-button>
      </div>
    </div>

    <template v-if="form.id">
      <el-form ref="form" label-position="left" :model="form" label-width="140px">
        <el-divider content-position="left">基本信息</el-divider>
        <el-row>
          <el-col :span="6">
            <el-form-item label="电商订单号" prop="orderId">
              {{ form.orderId }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单时间" prop="orderDate">
              {{ form.orderDate }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="realPayment">
              <span slot="label">
                实付款
                <el-tooltip content="商品价格+运杂费+代扣税款-非现金抵扣金额，与支付凭证 的支付金额一致" placement="top">
                  <i class="el-icon-info" />
                </el-tooltip>
              </span>
              {{ form.realPayment }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="amount">
              <span slot="label">
                商品金额
                <el-tooltip content="商品实际成交价 FOB(不含运杂费)，含非现金抵扣金额" placement="top">
                  <i class="el-icon-info" />
                </el-tooltip>

              </span>
              {{ form.amount }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item prop="tax">
              <span slot="label">
                代扣税款
                <el-tooltip content="非现金抵扣金额（使用积分、虚拟货币、代金券等非现金支付金额，无则填写 “0”" placement="top">
                  <i class="el-icon-info" />
                </el-tooltip>

              </span>
              {{ form.tax }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="distributionfee">
              <span slot="label">
                运杂费
                <el-tooltip content="无则填写“0”" placement="top">
                  <i class="el-icon-info" />
                </el-tooltip>

              </span>
              {{ form.distributionfee }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="discount">
              <span slot="label">
                非现金抵扣
                <el-tooltip content="非现金抵扣金额（使用积分、虚拟货币、代金券等非现金支付金额，无则填写 “0”" placement="top">
                  <i class="el-icon-info" />
                </el-tooltip>

              </span>
              {{ form.discount }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="币制" prop="currency">
              {{ form.currency }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="支付交易编号" prop="payOrderNo">
              {{ form.payOrderNo }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订购人" prop="buyerName">
              {{ form.buyerName }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订购人证件号" prop="ConsigneeCode">
              {{ form.ConsigneeCode }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收货人" prop="distributionfee">
              {{ form.contactName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="收货人电话" prop="contactMobile">
              {{ form.contactMobile }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收货地址" prop="contactAddr">
              {{ form.contactAddr }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="详细地址" prop="detailAddr">
              {{ form.detailAddr }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="备注" prop="note">
              {{ form.note }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">平台信息</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item prop="ebpCode">
              <span slot="label">
                电商平台代码
                <el-tooltip content="电商平台的海关注册登记编号" placement="top">
                  <i class="el-icon-info" />
                </el-tooltip>
              </span>
              {{ form.ebpCode }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电商平台名称" prop="ebpName">
              <span slot="label">
                电商平台名称
                <el-tooltip content="电商平台的海关注册登记的平台名称" placement="top">
                  <i class="el-icon-info" />
                </el-tooltip>

              </span>
              {{ form.ebpName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="paycomCode">
              <span slot="label">
                支付企业代码
                <el-tooltip content="支付企业的海关注册登记编号" placement="top">
                  <i class="el-icon-info" />
                </el-tooltip>

              </span>
              {{ form.paycomCode }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item prop="paycomName">
              <span slot="label">
                支付企业名称
                <el-tooltip content="支付企业在海关注册登记的企业名称" placement="top">
                  <i class="el-icon-info" />
                </el-tooltip>

              </span>
              {{ form.paycomName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="ebcCode">
              <span slot="label">
                电商企业代码
                <el-tooltip content="电商企业在海关注册登记的登记编号" placement="top">
                  <i class="el-icon-info" />
                </el-tooltip>
              </span>
              {{ form.ebcCode }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="ebcName">
              <span slot="label">
                电商企业代码
                <el-tooltip content="电商企业在海关注册登记的企业名称" placement="top">
                  <i class="el-icon-info" />
                </el-tooltip>
              </span>
              {{ form.ebcName }}
            </el-form-item>
          </el-col>
        </el-row>

        <template>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="预下单商品" name="first">
              <el-divider content-position="left">商品信息</el-divider>
              <el-table :data="form.order_goods" border stripe style="width: 100%;">
                <el-table-column type="expand">
                  <template slot-scope="scope">
                    <el-form inline class="demo-table-expand">
                      <el-form-item label="商品编码">
                        {{ scope.row._goods_detail.barcode }}
                      </el-form-item>
                      <el-form-item label="产地">
                        {{ scope.row._goods_detail.origin_name }}
                      </el-form-item>
                      <el-form-item label="品牌">
                        {{ scope.row._goods_detail.brand_name }}
                      </el-form-item>
                      <el-form-item label="单位">
                        {{ scope.row._goods_detail.unit_name }}
                      </el-form-item>

                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column label="商品">
                  <template slot-scope="scope">
                    <div style="display: flex;align-items: center;">
                      <img :src="scope.row._goods_detail.goods_img" alt="" style="width:50px; height: 50px;">
                      <div>
                        <p>商品名称：{{ scope.row._goods_detail.goods_name }}</p>
                        <p>规格名称： {{ scope.row._goods_rule.sku_name }}</p>
                        <p>商品SPU：{{ scope.row._goods_detail.goods_spu }}</p>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="贸易类型" width="80px">
                  <template slot-scope="scope">
                    {{ scope.row._goods_detail.trade_type_name }}
                  </template>
                </el-table-column>
                <el-table-column label="渠道商品金额" width="100px">
                  <template slot-scope="scope">
                    {{ scope.row.goods_price }}
                  </template>
                </el-table-column>
                <el-table-column label="规格成本价格" width="100px">
                  <template slot-scope="scope">
                    {{ scope.row._goods_rule.sku_price }}
                  </template>
                </el-table-column>

                <el-table-column label="数量" width="80px">
                  <template slot-scope="scope">
                    {{ scope.row.goods_num }}
                  </template>
                </el-table-column>

                <el-table-column label="推送状态" width="80px">
                  <template slot-scope="scope">
                    <div v-if="scope.row._orderlist_info.api_post_status == -1">
                      回执： {{ scope.row._orderlist_info.api_error }}
                    </div>
                    <div v-else-if="scope.row._orderlist_info.api_post_status == 1">
                      提交成功
                    </div>
                    <div v-else-if="scope.row._orderlist_info.api_post_status == 0">
                      未提交
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="已提交订单" name="second">

              <el-divider content-position="left">订单列表</el-divider>
              <el-table :data="apiOrderDetailList" border stripe style="width: 100%;" default-expand-all>
                <el-table-column type="expand">
                  <template slot-scope="scope">

                    <el-form label-position="left" inline class="demo-table-expand">
                      <el-form-item label="运费">
                        ¥{{ scope.row.deliver_money }}
                      </el-form-item>

                      <el-form-item label="税差">
                        ¥ {{ scope.row.tax_difference_money }}
                      </el-form-item>

                      <el-form-item label="优惠金额">
                        -¥{{ scope.row.discount_money }}
                      </el-form-item>

                      <el-form-item label="优惠券">
                        -¥{{ scope.row.coupon_money }}
                      </el-form-item>

                    </el-form>

                  </template>
                </el-table-column>
                <el-table-column prop="order_no" label="系统订单编号" width="150px">
                  <template slot-scope="scope">
                    {{ scope.row.order_no }}
                  </template>
                </el-table-column>
                <el-table-column prop="RecordMaterialNo" label="商品">
                  <template slot-scope="scope">
                    <div style="display: flex;align-items: center;">
                      <img :src="scope.row.order_goods[0].goods_img" alt="" style="width:50px; height: 50px;">
                      <div>
                        <p>商品名称： {{ scope.row.order_goods[0].goods_name }}</p>
                        <p>规格： {{ scope.row.order_goods[0].spec_sku_name }}</p>
                        <p>商品SPU：{{ scope.row.order_goods[0].goods_spu }}</p>
                        <p>贸易类型：{{ scope.row.order_goods[0].goods_type }}</p>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="goods_money" label="规格价（单价）" width="120px">
                  <template slot-scope="scope">
                    ￥{{ scope.row.order_goods[0].goods_money }}
                  </template>
                </el-table-column>
                <el-table-column prop="goods_num" label="数量" width="50px">
                  <template slot-scope="scope">
                    {{ scope.row.order_goods[0].goods_num }}
                  </template>
                </el-table-column>

                <el-table-column prop="real_total_money" label="商品总价" width="80px">
                  <template slot-scope="scope">
                    ￥{{ scope.row.goods_money }}
                  </template>
                </el-table-column>

                <el-table-column label="订单状态" prop="order_status" width="80px">
                  <template slot-scope="scope">
                    {{ order_status_formatter( scope.row,scope) }}
                  </template>
                </el-table-column>

                <el-table-column label="物流信息" width="200px">
                  <template slot-scope="scope">

                    <template v-if="scope.row.express_info">
                      <div v-for="(ex_item,ex_index) in scope.row.express_info" :key="ex_index" class="express-info" style="line-height: 1;">
                        <p v-if="scope.row.express_info.length > 1">包裹：{{ ex_index + 1 }}</p>
                        <p>快递：{{ ex_item.express_name }}</p>
                        <p>单号：{{ ex_item.express_no }}</p>
                      </div>
                    </template>

                  </template>
                </el-table-column>

                <el-table-column label="应付总价" prop="real_total_money" width="100px">
                  <template slot-scope="scope">
                    ￥{{ scope.row.real_total_money }}
                  </template>
                </el-table-column>

                <!--          <el-table-column label="操作" align="center">-->
                <!--            <template slot-scope="scope">-->
                <!--              <el-button-->
                <!--                type="text"-->
                <!--              >物流-->
                <!--              </el-button>-->
                <!--              <el-button-->
                <!--                type="text"-->
                <!--              >售后-->
                <!--              </el-button>-->
                <!--            </template>-->
                <!--          </el-table-column>-->

              </el-table>

              <el-row type="flex" justify="end" class="mt5">
                <el-col style="display: flex;justify-content: flex-end;">
                  <span>
                    订单总计： ¥{{ all_order_real_total_money }}
                  </span>
                </el-col>
              </el-row>

            </el-tab-pane>
          </el-tabs>

        </template>

        <el-divider v-if="true" content-position="left">支付&支付单信息</el-divider>
        <el-row v-if="true">
          <el-col :span="8">
            <el-form-item label="支付完成时间" prop="completeTime">
              <span v-if="form.xs_payment">
                {{ form.xs_payment.completeTime }}
              </span>
            </el-form-item>
          </el-col>

          <template v-if="form.xs_payment && form.xs_payment.checkOrgOrderNo">
            <el-col :span="8">
              <el-form-item label="支付单信息" prop="completeTime">
                <template v-if="null != form.xs_payment._customsApply_data">

                  <template v-if="2 == form.xs_payment._customsApply_data.resultCode">
                    <el-button disabled plain type="primary"> 报关结果：{{ form.xs_payment._customsApply_data.resultMsg }}</el-button><br>
                    <span> 验核机构交易号 {{ form.xs_payment._customsApply_data.checkOrgOrderNo }}</span>
                  </template>
                  <template v-else>
                    <el-button disabled plain type="danger"> 报关结果：{{ form.xs_payment._customsApply_data.resultMsg }}</el-button><br>
                  </template>

                </template>
                <span v-else>支付单推送中，等待海关回执</span>
              </el-form-item>
            </el-col>
          </template>

          <el-col :span="8">
            <el-form-item v-if="form._xs_apipay_return_data" label="二维码" prop="orderDate">
              <el-image
                style="width: 100px; height: 100px"
                :src="form._xs_apipay_return_data.payInfo.qrCodeUrl"
                :preview-src-list="srcList"
              />
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>
    </template>

    <el-skeleton v-else :rows="20" animated />

    <order-xml-drawer
      :visible.sync="showOrderXmlDrawer"
      :order-id="orderId"
      :detail-form="form"
    />
    <manifest-xml-drawer
      :visible.sync="showManifestXmlDrawer"
      :order-id="orderId"
      :detail-form="form"
    />
  </div>

</template>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 40%;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-dialog:not(.is-fullscreen) {
  margin-top: 6vh !important;
  margin-bottom: 6vh !important;
}
</style>
<script>
import { queryOrder, apiOrderDetail, orderInfo, apiOrderDetail_new } from '@/api/externalGoods'
import OrderXmlDrawer from './OrderXmlDrawer.vue'
import ManifestXmlDrawer from './ManifestXmlDrawer.vue'
export default {
  name: 'OrderDetails',
  components: {
    OrderXmlDrawer,
    ManifestXmlDrawer
  },
  props: {
    type: {
      type: String
    }
  },
  data() {
    return {
      activeName: 'first',
      form: {},
      showOrderXmlDrawer: false,
      showManifestXmlDrawer: false,
      // 清单状态
      options: [
        { 'value': 0, 'label': '未推送' },
        { 'value': 1, 'label': '电子口岸已暂存' },
        { 'value': 2, 'label': '电子口岸申报中' },
        { 'value': 3, 'label': '发送海关成功' },
        { 'value': 4, 'label': '发送海关失败' },
        { 'value': 100, 'label': '海关退单' },
        { 'value': 120, 'label': '海关入库' },
        { 'value': 300, 'label': '人工审核' },
        { 'value': 399, 'label': '海关审结' },
        { 'value': 800, 'label': '放行' },
        { 'value': 899, 'label': '结关' },
        { 'value': 500, 'label': '查验' },
        { 'value': 501, 'label': '扣留移送通关' },
        { 'value': 502, 'label': '扣留移送缉私' },
        { 'value': 503, 'label': '扣留移送法规' },
        { 'value': 599, 'label': '其它扣留' },
        { 'value': 700, 'label': '退运' }
      ],
      // 订单状态
      orderOptions: [
        { 'value': 0, 'label': '未推送' },
        { 'value': 1, 'label': '已推送' },
        { 'value': 2, 'label': '电子口岸申报中' },
        { 'value': 3, 'label': '发送海关成功' },
        { 'value': 4, 'label': '发送海关失败' },
        { 'value': 100, 'label': '海关退单' },
        { 'value': 120, 'label': '海关入库' }
      ],
      // 运单状态
      waybillOptions: [
        { label: '未推送', value: 0 },
        { label: '推送成功', value: 1 },
        { label: '新增申报成功', value: 2 },
        { label: '推送失败', value: 20 },
        { label: '海关入库', value: 120 }
      ],
      orderStatusOptions: [
        { 'value': -2, 'label': '待付款' },
        { 'value': -1, 'label': '已取消' },
        { 'value': 0, 'label': '待发货' },
        { 'value': 1, 'label': '已发货' },
        { 'value': 2, 'label': '已收货' },
        { 'value': 5, 'label': '已完成' },
        { 'value': 3, 'label': '海关审核中 | 仓库分拣打包' }
      ],
      // 贸易国
      tradeCountryData: [],
      //
      currencyData: [],
      // 计量单位
      unitData: [],
      srcList: [],
      apiOrderDetailList: null,
      orderId: null
    }
  },
  computed: {
    all_order_real_total_money() {
      let total = 0

      if (this.apiOrderDetailList) {
        this.apiOrderDetailList.forEach(item => total += Number(item.real_total_money))
      }

      return total.toFixed(2)
    }
  },
  watch: {
    type(val) {
      if (val) {
        if (this.form._xs_apipay_return_data) {
          this.srcList[0] = this.form._xs_apipay_return_data.payInfo.qrCodeUrl
        }
      }
    },
    form(val) {
      if (val) {
        // console.log(this.form._order_type)
        this.apiOrderDetailList = []

        if (this.form._order_type === 3) {
          this.getCList()
        }
        if (this.form._order_type === 1) {
          apiOrderDetail_new(this.form.id).then(response => {
            if (response.code === 10000) {
              this.apiOrderDetailList = response.data
            }
          })
        }
        if (this.form.apiOrderDetail) {
          this.form.apiOrderDetail.forEach(item => {
            if (item.order_status == -2) {
              item.order_status_a = '待付款'
            } else if (item.order_status == -1) {
              item.order_status_a = '已取消'
            } else if (item.order_status == 0) {
              item.order_status_a = '待发货'
            } else if (item.order_status == 1) {
              item.order_status_a = '已发货、待收货'
            } else if (item.order_status == 2) {
              item.order_status_a = '已收货'
            } else if (item.order_status == 3) {
              item.order_status_a = '海关审核中 | 仓库分拣打包中'
            } else if (item.order_status == 5) {
              item.order_status_a = '已完成'
            }
            console.log(item.order_status_a)
          })
        }
      }
    }
  },
  created() {
    this.getOrderDetails()
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    goBack() {
      this.$router.go(-1) // 返回上一层
    },
    async getOrderDetails() {
      this.orderId = this.$route.query.id

      const { data } = await orderInfo({ orderId: this.orderId, type: 1 })
      this.form = data
    },
    order_status_formatter(row, column) {
      let status = row.order_status
      for (const d of this.orderStatusOptions) {
        if (status === d.value) {
          status = d.label
          break
        }
      }
      return status
    },
    getCList() {
      queryOrder(this.form.id).then(res => {
        console.log(res, '0000000')
      })
    },
    close() {
      this.$emit('update:show', false)
    },
    /** 状态转换 */
    statusFormat(field, Options) {
      for (const d of Options) {
        if (field === d.value) {
          field = d.label
          break
        }
      }
      return field
    }
  }
}
</script>
<style scoped lang="less">

.express-info{
  p{
    margin: 5px;
  }
}

.app-container111{
    padding: 12px;
    margin: 3px 3px;
    background: white;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  .el-form-item{
    margin-bottom: 10px;
  }
  .el-divider--horizontal{
    margin: 25px 0;
  }
}

.header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  .header-btns {
    .el-button {
      margin-left: 10px;
    }
  }
}

</style>
